<template>
  <ElCard class="rd-8px shadow-sm h-[382px]">
    <!-- 标题 -->
    <div class="flex items-center pb-[16px]">
      <div class="text-[16px] font-bold">待办事宜</div>
    </div>
    <div class="px-[16px]">
      <div class="flex justify-between font-bold">
        <div class="w-[10%] text-[14px]">序号</div>
        <div class="w-[30%] text-[14px]">待办项目</div>
        <div class="w-[20%] text-[14px]">记录数</div>
        <div class="w-[40%] text-[14px]">待办描述</div>
      </div>
      <div class="w-[100%] border-1 mt-[10px] border-solid border-color-[#6950b9]"></div>
      <el-scrollbar height="380px" v-loading="loading">
        <template v-if="list.length">
          <div class="flex items-center justify-between mt-[10px]" v-for="(item, index) in list" :key="index">
            <div class="w-[10%]">
              <div class="w-[18px] h-[18px] p-[5px] bg-[#4d6bfe] text-[#fff] rounded-[50%] text-[12px] flex items-center justify-center">
                {{ item.serialNumber }}
              </div>
            </div>
            <div class="w-[30%] title text-[15px]" @click="handleView(item)">{{ item.moduleCode }}</div>
            <span class="w-[20%] c-[red] text-[15px]">{{ item.recordCount }}</span>
            <div class="w-[40%] text-[15px]">{{ item.description }}</div>
          </div>
        </template>
        <el-empty v-else description="暂无数据" />
      </el-scrollbar>
    </div>
  </ElCard>
</template>

<script setup>
const list = ref([]);
const loading = ref(true);
const loadGetTodoData = async () => {
  try {
  } catch (err) {
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  loadGetTodoData();
});
</script>

<style lang="scss" scoped>
.title:hover {
  color: #4d6bfe;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
</style>
